<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/react.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/babel.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.active{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.bigBox{
				width: 300px;
				height: 300px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		
		<div id="app"></div>
		
	</body>
	<script type="text/babel">
		// 组件一
		var MyBtn = React.createClass({
			getDefaultProps(){   //   getDefaultProps设置默认props值
				return{  // 默认属性
					sex:"女",
					name:"lily"
				}
			},
			propTypes:{  // 验证props
				//设置title属性验证规则，必须输字符串
				title: React.PropTypes.number.isRequired
			},
			render(){
				return (
					<div>
						<button>你好 { this.props.aaa } </button>
						<b>{this.props.sex}</b>
						<b>{this.props.title}</b>
						<p>{this.props.name}</p>
					</div>
				)
			}
		})
		
		
		// 组件二
		function MyDiv(props){
			return (
				<div className="active">
					<MyBtn aaa="123"  title="how are you" />
					
				</div>
			)
		}
		
		
		
		
		// 渲染
		var app = document.getElementById("app");
		ReactDOM.render(<MyDiv   />, app)
		// 注意“： 组件名首字母大写
	</script>
</html>
